<template>
   <div class="home">
     <headerTou title="会员"></headerTou> 
     <div class="map">
      <baidumap ></baidumap>
        <input class="search" type="text" placeholder="查找商家">
      </div>
      <div class="content">
          <div class="privilege">
             我的特权   <span class="See">查看更多></span>
          </div>
          <div class="PrivilegeContent">
            <div>
             <span><img src="../img/Rectangle6@3x.png" class="background" alt="">
             <img class="logo" src="../img/logo@3x.png" alt="">
             <span class="biaoti">冰火九重天洗车</span>
              <span class="jiage">￥900</span>
             </span>
              <span><img src="../img/Rectangle6@3x.png" class="background" alt="">
             <img class="logo" src="../img/logo@3x.png" alt="">
             <span class="biaoti">冰火九重天洗车</span>
              <span class="jiage">￥900</span>
             </span>
               <span><img src="../img/Rectangle6@3x.png" class="background" alt="">
             <img class="logo" src="../img/logo@3x.png" alt="">
             <span class="biaoti">冰火九重天洗车</span>
              <span class="jiage">￥900</span>
             </span>
             <span><img src="../img/Rectangle6@3x.png" class="background" alt="">
             <img class="logo" src="../img/logo@3x.png" alt="">
             <span class="biaoti">冰火九重天洗车</span>
              <span class="jiage">￥900</span>
             </span>
             </div>
          </div>
              <div class="privilege">
             我的会员卡   <span class="See">查看更多></span>
          </div>
           <div class="MembereContent">
            <div>
                <span class="span" @click="friendsPrivilege"> 
                   <img class="logo" src="../img/logo@3x.png" alt="">
                   <span class="biaoti">冰火九重天洗车</span>
                   <span class="yuer">余额</span>
                   <span class="qianshu">5000</span>
                </span>
                <span class="span"> 
                   <img class="logo" src="../img/logo@3x.png" alt="">
                   <span class="biaoti">冰火九重天洗车</span>
                   <span class="yuer">余额</span>
                   <span class="qianshu">5000</span>
                </span>
                <span class="span"> 
                   <img class="logo" src="../img/logo@3x.png" alt="">
                   <span class="biaoti">冰火九重天洗车</span>
                   <span class="yuer">余额</span>
                   <span class="qianshu">5000</span>
                </span>
                 <span class="span"> 
                   <img class="logo" src="../img/logo@3x.png" alt="">
                   <span class="biaoti">冰火九重天洗车</span>
                   <span class="yuer">余额</span>
                   <span class="qianshu">5000</span>
                </span> 
             </div>
          </div>
      </div>
   </div>
</template>
<script>
import baidumap from "./zujian/map.vue";
import headerTou from "./zujian/header.vue";

 
export default {
  data() {
    return {};
  },
  created(){
   

  },
  mounted() {},
    methods: {
      friendsPrivilege:function(){
         this.$router.push({ name: "friendsPrivilege" });
      }
    },
  components: {
    baidumap,
    headerTou
  }
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  .map {
    width: 750px;
    height: 360px;
    position: relative;
    .search {
      width: 650px;
      height: 80px;
      position: absolute;
      left: 0;
      top: -200px;
      bottom: 0;
      right: 0;
      margin: auto;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      border: none;
      padding-left: 48px;
    }
  }
  .content {
    padding: 30px 0 30px 30px;
    .privilege {
      font-family: PingFangSC-Medium;
      color: rgba(51, 51, 51, 1);
      font-size: 32px;
      padding: 0px 0 30px 0px;
      .See {
        float: right;
        font-family: "PingFangSC-Regular";
        padding-right: 30px;
        font-size: 24px;
      }
    }
    .PrivilegeContent {
      overflow-x: auto;
      overflow-y: hidden;
      margin-bottom: 60px;
      div {
        display: flex;
        justify-content: flex-start;
        width: 1000px;
      }

      span {
        width: 400px;
        height: 140px;
        margin-right: 20px;
        position: relative;
        // background: linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);
        .background {
          width: 400px;
          height: 140px;
        }
        .logo {
          position: absolute;
          top: 30px;
          left: 30px;
          width: 72px;
          height: 72px;
        }
        .biaoti {
          position: absolute;
          font-family: "PingFangSC-Regular";
          color: rgba(255, 255, 255, 1);
          top: 30px;
          left: 179px;
          width: 200px;
          font-size: 32px;
        }
        .jiage {
          position: absolute;
          font-family: "PingFangSC-Regular";
          color: rgba(255, 255, 255, 1);
          top: 80px;
          left: 200px;
          width: 100px;
          font-size: 40px;
        }
      }
    }
    .MembereContent {
      overflow-x: auto;
      overflow-y: hidden;
      margin-bottom: 60px;
      div {
        display: flex;
        justify-content: flex-start;
        width: 2640px;
      }
      .span {
        width: 660px;
        height: 360px;
        margin-right: 20px;
        position: relative;
        background-image: linear-gradient(-94deg, #884acc 0%, #c273cf 100%);
        border-radius: 8px;
        .logo {
          position: absolute;
          top: 30px;
          left: 30px;
          width: 72px;
          height: 72px;
        }
        .biaoti {
          position: absolute;
          top: 30px;
          left: 1.5rem;
          font-family: PingFangSC-Medium;
          font-size: 40px;
          color: #ffffff;
        }
        .yuer {
          font-family: PingFangSC-Regular;
          font-size: 36px;
          color: #ffffff;
          position: absolute;
          bottom: 30px;
          left: 30px;
        }
        .qianshu {
          font-family: SFUIText-Medium;
          font-size: 60px;
          color: #ffffff;
          position: absolute;
          bottom: 30px;
          left: 1.7rem;
        }
      }
    }
  }
}
</style>